<template>
  <div class="home">
    <nav-bar class="navBar" :class="{'active': isHeader}">
      <span slot="left" class="iconfont icon-caidan leftInfo"></span>
      <div slot="center" class="centerInfo">
        <span class="center-item">G</span>
        <input type="text" placeholder="家电返场同价 11.11" v-model="searchVal">
        <span class="search iconfont icon-sousuo"></span>
        <span class="cancel iconfont icon-quxiao" v-if="search" @click="clearSearchVal"></span>
      </div>
      <span slot="right" v-if="!userInfo" @click="$router.push('/login')">登录</span>
      <span slot="right" v-else class="iconfont icon-wode right-icon" @click="$router.push('/user')"></span>
    </nav-bar>
    <slide :img-list="slideList" class="slide-item"></slide>
    <category :category-list-info="cateListInfo"></category>
    <goods :goods-list-info="goodsList"></goods>
  </div>
</template>
<script>
import { scroll } from 'utils/mixin'
// 公共组件
import navBar from 'components/common/navbar/navBar'
import Slide from 'components/common/swiper/Slide'

// 内容相关组件
import Category from './childCom/Category'
import Goods from './childCom/Goods'



export default {
  name: 'Home',
  data() {
    return {
      slideList: [],//轮播图数据
      //用户名存在显示我的 ，不存在显示登录
      searchVal: '', //搜索框的值

      cateListInfo: [], //分类列表数据
      goodsList: [], //商品的数据
    }
  },
  mixins: [scroll],
  mounted() {
    window.addEventListener('scroll', (e) => {
      this.pageScroll(e, 100)
    })
  },
  computed: {
    search() {
      return this.searchVal.trim() ? true : false
    },
    userInfo() {
      if (window.sessionStorage.getItem('token')) {
        return this.$store.state.userInfo
      }
    }
  },
  components: {
    navBar,
    Slide,


    Category,
    Goods

  },
  created() {
    this.getSlideInfo()
    this.getCategoryInfo()
    this.getGoodsInfo()
  },

  methods: {
    // 获取轮播图数据
    async getSlideInfo() {
      const res = await this.$require({
        url: '/home/sliders',
        method: 'get'
      })
      if (res.status == 0) {
        this.slideList = res.data
      }
    },
    // 获取推荐信息
    async getCategoryInfo() {
      const res = await this.$require({
        url: '/home/category',
        method: 'get'
      })
      this.cateListInfo = res.data
    },
    // 获取商品数据
    async getGoodsInfo() {
      const res = await this.$require({
        url: '/home/floorlist',
        method: 'get'
      })
      if (res.status == 0) {
        this.goodsList = res.data

      }
    },

    // 清空input的数据
    clearSearchVal() {
      this.searchVal = ""
    }

  }

}
</script>
<style scoped lang="scss">
// 头部导航栏
.navBar {
  box-sizing: border-box;
  overflow: hidden;
  position: fixed;
  z-index: 99;
  left: 0;
  top: 0;

  span {
    color: #fff;
    font-size: 14px;
  }
  .leftInfo {
    font-size: 30px;
    font-weight: 500;
    display: block;
  }
  .centerInfo {
    position: relative;
    input {
      width: 100%;
      height: 30px;
      border-radius: 20px;
      outline: none;
      border: 1px solid #eee;
      padding: 0px 0px 0px 65px;
      box-sizing: border-box;
      font-size: 14px;
    }
    input::placeholder {
      color: #999;
      // font-size: 13px;
    }
    .center-item {
      position: absolute;
      left: 0;
      top: 15px;
      color: rgb(246, 53, 21);
      font-size: 18px;
      font-weight: 600;
      display: inline-block;
      padding: 10px 6px 10px 10px;
      line-height: 0;
      border-right: 1px solid #999;
    }
    .search {
      position: absolute;
      left: 40px;
      color: #999;
      font-size: 16px;
      font-weight: bold;
    }

    .cancel {
      position: absolute;
      top: 0;
      right: 10px;
      color: #333;
      font-size: 16px;
      font-weight: 500;
    }
  }
  .right-icon {
    font-size: 20px;
    font-weight: 500;
    display: block;
  }
}

.active {
  background-color: red;
}

//轮播图
.slide-item {
  width: 100%;
  height: 185px;
}
</style>
